
document.addEventListener("DOMContentLoaded", function() {
    // 当页面加载完成后执行的代码
    const newDiv = document.createElement("div");
    newDiv.className = "notification";
    newDiv.id = "notification";

    const newMessage = document.createElement("p");
    newMessage.className = "message";

    newDiv.appendChild(newMessage);

    document.body.appendChild(newDiv);
    showNotification('操作失败', 'warning',3000);
});
function showNotification(message, type,time) {
    const notification = document.getElementById('notification');
    const messageElement = notification.querySelector('.message');
    messageElement.innerText = message;

    if (type === 'success') {
        notification.className = 'notification success';
    } else if (type === 'warning') {
        notification.className = 'notification warning';
    }

    setTimeout(() => {
        notification.style.top = '0';
        const overlay = document.createElement('div');
        overlay.style.position = 'absolute';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '1%';
        overlay.style.height = '100%';
        overlay.style.background = 'rgba(255,255,255,0.3)';
        notification.appendChild(overlay);
        //让进度条从 1% 变到 100% 的动画
        let width = 1;
        const timer = setInterval(() => {
            if (width >= 100) {
                clearInterval(timer);
            }
            overlay.style.width = `${width}%`;
            width++;
        }, time/100);
    }, time/10);

    setTimeout(() => {
        notification.style.top = '-60px';
        setTimeout(() => {
            notification.removeChild(overlay);
        }, time);
    }, time+500);
}